<!--
 * @Author: lmk
 * @Date: 2022-04-15 22:27:06
 * @LastEditTime: 2022-05-08 14:08:05
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="">
    <div class="relative">
      <img :src="bannerImage" alt="" class="banner">
      <div class="banner-view absolute flex items-center justify-center">
        <div class="text-center center-txt">
          <p>{{$t(`${pageName}.bannerTitleEn`)}}</p>
          <p v-if="isZh" class="title-zh">{{$t(`${pageName}.bannerTitleZh`)}}</p>
        </div>
      </div>
    </div>
    <pageTitle class="hide-mobile"/>
    <div class="page-content">
      <div class="search-view flex" v-if="isShowSearch">
        <input type="text" :placeholder="$t('common.search')" class="search" v-model="state.searchValue" @keyup="getChange">
        <img src="/img/search.png" alt="" class="search-image self-center" @click="setValue">
      </div>
      <div class="title-box" :class="{unSearchTitle:!isShowSearch}">
        <comonTitle :entitle="$t(`${pageName}.titleEn`)"  :zhtitle="$t(`${pageName}.titleZh`)"/>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import pageTitle from '@/components/pageTitle'
import comonTitle from '@/components/comonTitle'
import { useIsZh } from '@/utils/useIsZh'
import { reactive } from 'vue'
export default {
  props: {
    bannerImage: {
      type: String,
      default: '/img/home/banner.png'
    },
    pageName: {
      type: String,
      default: 'activity'
    },
    isShowSearch: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    const {isZh} = useIsZh()
    const state = reactive({
      searchValue:''
    })
    const setValue = ()=> emit('getSearchValue', state.searchValue)
    const getChange = ({keyCode}) => keyCode===13&&setValue()
    return {
      isZh,state,getChange,setValue
    }
  },
  components: {
    pageTitle,comonTitle
  }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1400px) {
  .center-txt{
    font-size: 60px;
  }
  .page-content{
    background-size: 100% 742px;
    padding: 44px 80px;
    background: url(/img/home/bg.png) no-repeat;
  }

  .search-view{
    height: 80px;
    border-radius: 12px;
    padding-left: 54px;
    padding-right: 42px;
    .search{
      height: 80px;
      font-size: 24px;
      padding-right: 20px;
    }
    .search-image{
      width: 32px;
    }
  }
  .title-zh{
    letter-spacing: 40px;
    text-align: center;
    margin-left: 20px;
  }

  .title-box{
    margin-top: 44px;
    margin-bottom: 34px;
    &.unSearchTitle{
      margin-top: 0;
    }
  }
}
@media screen and (max-width: 1401px) {
  .center-txt{
    font-size: 24px;
  }
  .page-content{
    padding: 7px 15px;
    background: url(/img/home/bg-m.png) no-repeat;
    background-size: 375px 387px;
  }
  .search-view{
    height: 30px;
    border-radius: 6px;
    padding: 0 10px;
    .search{
      height: 30px;
      font-size: 12px;
      padding-right: 20px;
    }
    .search-image{
      width: 14px;
    }
  }
  .title-zh{
    letter-spacing: 20px;
    text-align: center;
    margin-left: 20px;
  }

  .title-box{
    margin-top: 24px;
    margin-bottom: 14px;
    &.unSearchTitle{
      margin-top: 0;
    }
  }
}
.banner{
  width: 100%;
  display: block;
}
.banner-view{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.center-txt{
  font-family: 'zyt';
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1;
  p{
    &:last-child{
      margin-top: 30px;
    }
  }
}
.page-content{
  background-position: top;
  .search-view{
    background:transparentize($color: #ffffff, $amount: 0.7);
    box-shadow: 4px 4px 6px 1px rgba(212, 178, 104, 0.12);
    .search{
      width: 100%;
      outline: none;
      background: transparent;
      color: white;
      &::placeholder{
        color: #999999;
      }
    }
    .search-image{
      cursor: pointer;
    }
  }
}
</style>